<template>
  <div class="home">
    <Header></Header>
    <div class="home-content" style="overflow:auto">
      <div v-if="dataList.length > 0" class="content-box" v-for="(item, index) in dataList" @click="gotoDetail(item.id)">
        <div class="content-header">
          <p>{{ $t('assemble.产品信息') }}</p>
          <p>{{ $t('assemble.产品代号') }}</p>
          <p>{{ $t('assemble.产品描述') }}</p>
          <p>{{ $t('assemble.尺寸') }}</p>
          <p>{{ $t('assemble.单位') }}</p>
        </div>
        <div class="content">
          <!-- 产品信息 -->
          <div class="message">
            <div class="message-img">
              <img :src="item.images[0]" alt="">
            </div>
            <!-- <div class="ewm-box">
              <img :src="item.images[1]" alt="">
              <p>147852369987</p>
              <p> 321456987741</p>
            </div> -->
          </div>
          <!-- 产品代号 -->
          <div style="width: 100px; text-align: center; font-size: 13px;">{{ item.code }}</div>
          <!-- 产品描述 -->
          <div style="width: 200px;text-align: center; font-size: 13px;" class="desc">{{ item.describe }}</div>
          <!-- 尺寸 -->
          <div style="width: 150px;text-align: center;font-size: 13px;">{{ item.size }}</div>
          <!-- 单位 -->
          <div style="width: 100px;text-align: center; font-size: 13px;">{{ item.unit }}</div>
        </div>
      </div>

      <div v-if="dataList.length == 0" style="width: 100%;text-align: center;color: F8f8f8;">
        暂无商品
      </div>

    </div>

    <div class="kong" style="height:164px ;"></div>
    <Footer></Footer>
  </div>
</template>


<script>
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
import { progetlist } from '../../utils/api'
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      dataList: [

      ],
    }
  },
  mounted() {
    let token = localStorage.getItem("token")
    console.log("token", token)
    if (token == '' || token == undefined) {
      this.$router.push({ path: '/login' })
    } else {
      this.getDatalits()
    }
    localStorage.removeItem("ReorderData")
  },
  methods: {

    //商品列表
    async getDatalits() {
      let res = await progetlist()
      console.log("商品列表", res)
      if (res.code = 1) {
        this.dataList = res.data.list
        this.dataList.forEach((item, index) => {
          item.images = item.images.split(',')
        })
        console.log("dataList", this.dataList)
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }

    },
    gotojianbie() {
      this.$router.push({ path: '/identify' })

    },
    gotoDetail(id) {
      // console.log("id", id)
      this.$router.push({ path: '/home/productDetail', query: { id } })

    },

  }
}
</script> 

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  align-items: center;

  .home-content {
    width: 1250px;
    height: 800px;
    padding: 20px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    margin: 0 auto;
    margin-top: 80px;
    flex: 1;


    .content-box {
      width: 1200px;
      height: 200px;
      background-color: #FFFFFF;
      border-radius: 20px 20px 20px 20px;
      opacity: 1;
      margin: 0 auto;
      margin-bottom: 20px;
      cursor: pointer;

      .content-header {
        width: 100%;
        height: 47px;
        background: #EDEDED;
        border-radius: 20px 20px 0px 0px;
        opacity: 1;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 19px;
        display: flex;
        justify-content: space-between;
        // padding: 0 70px;
        box-sizing: border-box;

        p {
          &:nth-of-type(1) {
            width: 270px;
            text-align: center;
          }

          &:nth-of-type(2) {
            width: 100px;
            text-align: center;
          }

          &:nth-of-type(3) {
            width: 200px;
            text-align: center;
          }

          &:nth-of-type(4) {
            width: 150px;
            text-align: center;
          }

          &:nth-of-type(5) {
            width: 100px;
            text-align: center;
          }
        }
      }

      .content {
        width: 1200px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .message {
          width: 270px;
          height: 120px;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          border: 1px solid #EDEDED;
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;

          .message-img {
            width: 240px;
            height: 160px;
            // border-right: 1px solid #EDEDED;
            padding-top: 20px;
            box-sizing: border-box;

            img {
              width: 240px;
              height: 120px;
              border-radius: 10px 10px 10px 10px;
              opacity: 1;
            }
          }
        }

        .ewm-box {
          padding: 10px 25px;
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            margin: 0;
            font-size: 12px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 19px;
            margin-top: 7px;
          }
        }

        .desc {
          width: 315px;

        }
      }

    }
  }
}
</style>